<!DOCTYPE html>
<!-- saved from url=(0059)http://fantaghiro.github.io/miaov/JS_Basic_Lessons/9-1.html -->
<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>点击往下掉，再点击飘回来</title>
<script>
window.onload = function () {
	var str = '';
	var len = 20;
	var aDiv = document.getElementsByTagName('div');
	var timer = null;
	var num = 0;
	var flag = true; //flag代表方向
	var finished = true;
	
	for ( var i=0; i<len; i++ ) {
		str += '<div style="width:50px; height:50px; background:red; position:absolute; top:0px; left:'+ i*60 +'px;"></div>';
	}
	
	document.body.innerHTML = str;
	
	// document.onclick = function () {
	// 	clearInterval( timer );
	// 	timer = setInterval( function (){
	// 		doMove( aDiv[num], 'top', 23, 500 );
	// 		num ++;
	// 		if ( num === len ) {
	// 			clearInterval( timer );
	// 		}
	// 	}, 100 );
	// };

	document.onclick = function () {
		
		if ( !finished ) { return; } //如果一点击，前一轮没有完成就直接退出

		finished = false; //finished用于检测一轮是否完成，新一轮开始所以finished为false

		clearInterval( timer );
		timer = setInterval( function (){

			doMove( aDiv[num], 'top', 23, flag?500:0, num == len - 1 ? function(){
					finished = true; //当且仅当最后一个aDiv落定的时候，finished才算完成，改为true
					flag = !flag;
					// alert("完成了一轮！");
				} : null);
			num ++;

			if ( num === len ) {
				clearInterval( timer );
				num = 0;
			}
			
		}, 100 );
		
	};
};

function doMove ( obj, attr, dir, target, endFn ) {
    
    dir = parseInt(getStyle( obj, attr )) < target ? dir : -dir;
    
    clearInterval( obj.timer );
    
    obj.timer = setInterval(function () {
        
        var speed = parseInt(getStyle( obj, attr )) + dir;
        
        if ( speed > target && dir > 0 ||  speed < target && dir < 0  ) {
            speed = target;
        }
        
        obj.style[attr] = speed + 'px';
        
        if ( speed == target ) {
            clearInterval( obj.timer );
            endFn && endFn();
        }
        
    }, 30);
}

function getStyle ( obj, attr ) { 
    return obj.currentStyle?obj.currentStyle[attr] : getComputedStyle( obj )[attr];
}
</script>
</head>
<body><div style="width:50px; height:50px; background:red; position:absolute; top:0px; left:0px;"></div><div style="width:50px; height:50px; background:red; position:absolute; top:0px; left:60px;"></div><div style="width:50px; height:50px; background:red; position:absolute; top:0px; left:120px;"></div><div style="width:50px; height:50px; background:red; position:absolute; top:0px; left:180px;"></div><div style="width:50px; height:50px; background:red; position:absolute; top:0px; left:240px;"></div><div style="width:50px; height:50px; background:red; position:absolute; top:0px; left:300px;"></div><div style="width:50px; height:50px; background:red; position:absolute; top:0px; left:360px;"></div><div style="width:50px; height:50px; background:red; position:absolute; top:0px; left:420px;"></div><div style="width:50px; height:50px; background:red; position:absolute; top:0px; left:480px;"></div><div style="width:50px; height:50px; background:red; position:absolute; top:0px; left:540px;"></div><div style="width:50px; height:50px; background:red; position:absolute; top:0px; left:600px;"></div><div style="width:50px; height:50px; background:red; position:absolute; top:0px; left:660px;"></div><div style="width:50px; height:50px; background:red; position:absolute; top:0px; left:720px;"></div><div style="width:50px; height:50px; background:red; position:absolute; top:0px; left:780px;"></div><div style="width:50px; height:50px; background:red; position:absolute; top:0px; left:840px;"></div><div style="width:50px; height:50px; background:red; position:absolute; top:0px; left:900px;"></div><div style="width:50px; height:50px; background:red; position:absolute; top:0px; left:960px;"></div><div style="width:50px; height:50px; background:red; position:absolute; top:0px; left:1020px;"></div><div style="width:50px; height:50px; background:red; position:absolute; top:0px; left:1080px;"></div><div style="width:50px; height:50px; background:red; position:absolute; top:0px; left:1140px;"></div><div id="__nightingale_view_cover" style="width: 100%; height: 100%; transition: -webkit-transform 10s ease-in-out; position: fixed !important; left: 0px !important; bottom: 0px !important; overflow: hidden !important; pointer-events: none !important; z-index: 2147483647; opacity: 0; background: rgb(0, 0, 0) !important;"></div></body></html>